<template>
	<view class="login">

		<!-- 加载动画 -->
		<loading ref="loading" :custom="false" :shadeClick="true" :type="1" :shadeShow="false">
		</loading>
		<view class="login-box">
			<view class="box">
				<text>账号</text>
				<input v-model="username" />
			</view>
			<view class="box">
				<text>密码</text>
				<input v-model="password" password style="font-size: 32rpx;" />
			</view>
			<view @click="login" class="login-submit">
				<text>登录</text>
			</view>
		</view>


		<image class="image-bg" src="../../static/bj.jpg" />

	</view>
</template>

<script>
	import md5 from 'js-md5'
	import baseUrl from '../../utils/config.js'

	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components:{
			loading
		},
		data() {
			return {
				username: uni.getStorageSync('userId') || '',
				password: uni.getStorageSync('passWord') || '',
			}
		},

		methods: {
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			// 登录
			login() {
				let url = 'user/login';
				let that = this;

				if (this.username == '' || this.password == '') {
					uni.showToast({
						title: '请输入账号密码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				that.open();

				uni.request({
					url: baseUrl + url,
					data: {
						userName: this.username,
						password: this.password,
					},
					//formdate格式
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					method: "POST",
					success: (res) => {
						that.close();
						// console.log('登录',res)
						if (res.data.status == 200) {
							uni.setStorageSync('userName', res.data.ext$.userinfo.userName);
							uni.setStorageSync('userId', res.data.ext$.userinfo.userId);
							uni.setStorageSync('passWord', that.password);
							uni.setStorageSync('token', res.data.ext$.token);
							uni.setStorageSync('userInfo', res.data.ext$.userinfo);
							uni.reLaunch({
								url: "../home/home"
							})
						} else {
							let msg = res.data.msg
							if (msg != undefined) {
								uni.showToast({
									title: msg,
									duration: 2000,
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: '服务器故障',
									duration: 2000,
									icon: 'none'
								});
							}

						}
					},
					fail: (res) => {
						that.close();

						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					}
				});

			}
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		display: flex;
		flex-direction: column;
		color: #fff;
		font-size: 32rpx;


		&-submit {
			display: flex;
			align-items: center;
			justify-content: center;

			margin-top: 100rpx;
			height: 60rpx;
			color: white;
			border-radius: 45rpx;
			border: 3rpx solid #fff;
			width: 100%;
			font-size: 36rpx;
		}

		&-box {
			flex-direction: column;
			height: 600rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;
			margin: 0 auto;
			margin-top: 500rpx;

			.box {
				display: flex;
				justify-content: center;
				height: 100rpx;
				align-items: center;

				text {
					font-size: 36rpx;
					padding-right: 30rpx;
				}
			}

			input {

				border-bottom: 3rpx solid #fff;
				flex: 1;
			}
		}

		.image-bg {
			position: absolute;
			z-index: -1;
			left: 0;
			right: 0;
			bottom: 0;
			right: 0;
			width: 100vw;
			height: 100vh;

		}
	}
</style>
